<template>
	<u-popup :show="showPop" mode="bottom"  :round="10" @close="$emit('change',false)">
		<view class="pop_con">
			<view class="info">
				<!-- <image :src="$ossUrl+collection.main_image" mode="aspectFill"></image> -->
				<view class="right">
					<text class="font-size-16 font-color-textPrimary font-w-bold mb-6">{{ collection.name && handleLang(collection.name)}}</text>
					<text class="font-size-14 font-color-describe">{{handleLang('持有')}}{{ totalNum }}{{handleLang('个')}}</text>
				</view>
				<view v-if="collection.batch_up && types == 2">
					<w-button v-if="!showCheck" size="ss" shape="circle"
						@click='showCheck=!showCheck'>{{handleLang('批量寄售')}}</w-button>
					<view class="font-color-minor flex flex-js-end flex-ai-end" style="height: 160rpx;"
						v-if="showCheck">
						<view class="flex flex-ai-center">
							<w-icon :name="batch.count<=1? 'minus-disable':'minus-active'" size="26" @click='minus'>
							</w-icon>
							<input v-model="batch.count" type="number" @input="changeCount"
								class="plr-4 font-color-dark" style="width: 80rpx;text-align: center;" />
							<w-icon :name="batch.count==batch.maxCount? 'add-disable':'add-active'" size="26"
								@click='add'></w-icon>
						</view>
					</view>
				</view>
				<w-icon name="close2" size="24" class="close" @click="$emit('change',false)"></w-icon>
			</view>
			<!-- <view class="flex-center-sb mtb-10">
				<text class="font-size-12 font-color-999">{{handleLang('默认价格从低到高排序')}}</text>
				<text class="font-size-14 font-color-textPrimary">{{handleLang('平均价：')}}¥ {{ collection.avg_price }}</text>
			</view> -->
			
			<view class="list_con" @touchmove.stop>
				<u-gap height="10"></u-gap>
				<scroll-view scroll-y="true" style="max-height: 90vh;">
					<view class=" ">
						<view @click="jumpDetail(item)" v-for="(item,idx) in list" :key="idx" class="flex flex-ai-center pa-8 flex-js-sb" style="border-bottom: 1rpx solid #eee;">
							<!-- 藏品 -->
							<view class="flex flex-ai-center">
								<image :src="$ossUrl+collection.main_image" mode="aspectFill" style="width: 92rpx;height: 92rpx;border-radius: 12rpx;"></image>
								<view v-if="types==2" class="card flex flex-dir-col ml-12">
									
									<view class="flex flex-ai-center">
										<!-- <view class="font-size-12 mr-10">#{{ item.collection_code }}{{ collection.total_num?'/' + collection.total_num:'' }}</view> -->
										<view class="font-size-16 font-w-500 mr-10">#{{ item.collection_code }}</view>
										<view v-if="item.status == 2" class="status" style="font-size: 16rpx;color: #00160E;padding: 4rpx 10rpx;border-radius: 16rpx;" :style="getStatus(item).style">{{ getStatus(item).text }}</view>
									</view>
									<view class="flex flex-ai-center mt-4">
										<view class="font-color-666 font-size-10">{{handleLang('持仓天数：')}}<text class="font-color-textPrimary">{{item.day}}</text></view>	
										<view class="font-color-666 font-size-10 ml-8" v-if="item.from_price">购入价格：{{ item.from_price }}</view>
									</view>
									<!-- <view v-if="item.from_price" class="font-color-textPrimary font-w-bold font-size-10 mt-4">￥{{item.from_price}}</text></view>
									<view v-else class="font-color-222 font-w-bold font-size-10 mt-4"></view> -->
								</view>
								<!-- 盲盒 -->
								<view v-if="types==1" class="card ml-12">
									<view class="price font-size-16 font-color-black font-w-500">{{ item.from_price || '--' }}
									</view>
									<view class="status" :style="getStatus(item).style">{{ getStatus(item).text }}</view>
								</view>
							</view>
							<view class="check" v-if="item.checked&&showCheck">
								<w-icon size="20" v-if="checked.has(item.id)" name="checked-icon"></w-icon>
								<w-icon size="20" v-else name="uncheck-icon"></w-icon>
							</view>
						    <w-button v-else style="height: 64rpx;border-radius: 54rpx;width: 100rpx;font-size: 24rpx;">去寄售</w-button>
							<!-- <u-icon v-else name="arrow-right" color="#666"></u-icon> -->
						</view>
					</view>
					<!-- <w-loading :type="loadingType" emptyType="search" class="ptb-10" emptyTop="100"></w-loading> -->
				</scroll-view>
				<view class="flex flex-js-sb flex-ai-center pt-12" v-show="showCheck">
					<w-button  style="width: 260rpx;" shape="circle" :pain="true"
						@click='cleatBatch'>{{handleLang('取消寄售')}}</w-button>
					<w-button  style="width: 400rpx;" shape="circle" @click='toResale'>{{handleLang('立即寄售')}}</w-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { user_collection_Detail } from '@/api/collection/index.js';
	export default {
		props:{
			id:{
				type: String | Number,
				default: ''
			},
			types:{
				type: String | Number,
				default: ''
			},
			showPop:{
				type: Boolean,
				default: false
			}
		},
		model:{
			prop:'showPop',
			event:'change'
		},
		watch:{
			showPop(e){
				Object.assign(this.$data, this.$options.data()); 
				e && this.getDetails();
			}
		},
		data() {
			return {
				showCheck: false,
				checked: new Set(),
				activeStyle: {
					"font-size": '32rpx',
					color: "#598EFF"
				},
				inactiveStyle:{
					"font-size": '28rpx',
				},
				page:1,
				list:[],
				isNext:true,
				totalNum:0,
				collection:{
					batch_up: 0
				},
				loadingType:'none',
				batch: {
					count: 0,
					maxCount: 200
				}
			};
		},
		methods:{
			getDetails() {
				if(!this.isNext) return;
				this.loadingType = 'loading';
				user_collection_Detail({ collection_id:this.id,types:this.types,page:this.page }).then(res=>{
					let { collection } = res.data;
					let { last_page,data,total } = res.data.list;
					this.totalNum = total;
					this.collection = collection;
					this.list = [...this.list,...data];
					let maxCount = data.filter(item => item.checked).length;
					this.batch.maxCount = maxCount < 200 ? maxCount : 200;
					this.isNext = false;
					this.loadingType = 'nomore';
					// if(this.page<last_page){
					// 	this.page++;
					// }else{
					// 	this.isNext = false;
					// 	this.loadingType = 'nomore';
					// }
					!data.length && (this.loadingType = 'empty');
				}).catch(err=>{})
			},
			// 获取状态数据
			getStatus(item) {
				switch (true) {
				    case item.is_link == 0 && this.types == 2:
				        return {
				            text: "上链中",
				            style: {
				                "background-color": "#999",
				            },
				        };
				        break;
				    case !!item.is_lock:
				        return {
				            text: "锁定中",
				            style: {
				                "background-color": "#999",
				            },
				        };
				        break;
				    case item.status == 2:
				        return {
				            text: "寄售中",
				            style: {
				                background: "#00FFAA",
				            },
				        };
				        break;
				    case !!item.can_compose:
				        return {
				            text: "可合成",
				            style: {
				                background: "#00FFAA",
				            },
				        };
				        break;
				    // 来源
				    case item.status == 1:
				        let source_type = {
				            // '1':'购买',
				            // '2':'二级市场',
				            1: "持有",
				            2: "持有",
				            3: "开盲盒",
				            4: "赠送",
				            5: "空投",
				            6: "抽奖",
				            7: "积分兑换",
				            8: "合成",
				        };
				        let obj = {
				            text: source_type[item.source_type],
				            style: {
				                background: "#00FFAA",
				            },
				        };
				        return obj;
				        break;
				
				    case item.status == 10:
				        return {
				            text: "赠送中",
				            style: {
				                "background-color": "#999",
				            },
				        };
				        break;
				}
			},
			// 取消寄售
			cleatBatch() {
				this.showCheck = false
				this.batch.count = 0
				this.goChecked()
			},
			// 批量
			minus() {
				if (this.batch.count <= 1) return;
				this.batch.count--
				this.goChecked()
			},
			add() {
				if (this.batch.count == this.batch.maxCount) return;
				this.batch.count++
				this.goChecked()
			},
			jumpDetail(item){
				if(this.types == 2 ) this.goCP(item);
				if(this.types == 1) this.goBlindBox(item)
			},
			changeCount({
				detail
			}) {
				let value = Number(detail.value)
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.batch.count = value
					if (value < 1) {
						this.batch.count = 1
					}
					if (value > this.batch.maxCount) {
						this.batch.count = this.batch.maxCount;
					}
					this.goChecked()
				}, 500)
			},
			// 选中
			goChecked() {
				let num = this.batch.count;
				let hasChecked = this.list.filter(item => item.checked);
				let result = hasChecked.slice(0, num);
				this.checked = new Set(result.map(item => item.id))
			},
			toResale() {
				let list = Array.from(this.checked);
				if (!list.length) return;
				uni.navigateTo({
					url: `/pages/consignments/consignments?pageType=${this.types}&id=${list.join(',')}`
				})
			
			},
			// 盲盒详情
			goBlindBox(item) {
				uni.setStorageSync('blindBoxInfo',{...this.collection,num:this.totalNum,blindBoxId:item.blind_box_id,id:item.id})
				this.$emit('change',false);
				setTimeout(()=>{
					if(item.status==1){
						uni.$u.route('/pages/blindBox/index')
					}else{
						uni.$u.route('/pages/blindBox/blindBoxDetails',{id:item.id})
					}
				},500)
			},
			goCP(item) {
				if (this.showCheck) {
					if (!item.checked) return;
					if (this.checked.has(item.id)) {
						this.checked.delete(item.id)
					} else {
						this.checked.add(item.id)
					}
					this.batch.count = this.checked.size
					this.$forceUpdate()
					return;
				}
				
				this.$emit('change', false);
				setTimeout(() => {
					uni.$u.route('/pages/myCollection/collectionDetails', {
						id: item.id
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop_con{
		width: 100%;
		padding: 48rpx 32rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		>.info{
			width: 100%;
			position: relative;
			@extend .flex-center-sb;
			>image{
				min-width: 160rpx;
				max-width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 8rpx;
			}
			>.right{
				width: calc(100% - 180rpx);
				@extend .flex,.flex-dir-col;
			}
			>.close{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		>.list_con{
			width: 100%;
			max-height: 800rpx;
			overflow-y: scroll;
		}
		.card{
			// height: 140rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;
			// min-height: 150rpx;
			@extend .flex,.flex-dir-col;
			.check {
				position: absolute;
				left: 8rpx;
				top: 8rpx;
			}
			>.price::before{
				content: '￥';
				font-size: 24rpx;
				// color: #000;
				font-weight: 500;
			}
			>.status{
				padding: 8rpx 24rpx;
				font-size: 20rpx;
				color: #fff;
				// position: absolute;
				// top: 0;
				// right: 0;
				font-size: 20rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
